import React, {Component} from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import Swiper from 'react-native-swiper'

const styles = StyleSheet.create({
    wrapper: {},
    slide1: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#9DD6EB'
    },
    slide2: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#97CAE5'
    },
    slide3: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#92BBD9'
    },
    text: {
      color: '#fff',
      fontSize: 30,
      fontWeight: 'bold'
    },
    box: {
      width: '33.33%',
      alignItems: 'center',
      marginTop: 15
    }
  })

export default class Home extends Component {
  render() {
    return <View>
        {/* 在轮播图外面需要有一层View, 这个View需要手动设置一个高度 */}
      <View style={{height: 220}}>
        <Swiper style={styles.wrapper} showsButtons={true} autoplay={true} loop={true}>
          <View style={styles.slide1}>
            <Text style={styles.text}>Hello Swiper</Text>
          </View>
          <View style={styles.slide2}>
            <Text style={styles.text}>Beautiful</Text>
          </View>
          <View style={styles.slide3}>
            <Text style={styles.text}>And simple</Text>
          </View>
        </Swiper>
      </View>
      {/* 图片区域 */}
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
          {/* 在RN中, 默认就已经为所有的View启用了弹性盒模型, 同时默认的主轴是纵轴 */}
        <View style={styles.box}>
          <Image source={require('../../images/menu1.png')} style={{width: 60, height: 60}}></Image>
          <Text>新闻资讯</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../images/menu2.png')} style={{width: 60, height: 60}}></Image>
          <Text>图片分享</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../images/menu3.png')} style={{width: 60, height: 60}}></Image>
          <Text>商品购买</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../images/menu4.png')} style={{width: 60, height: 60}}></Image>
          <Text>留言反馈</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../images/menu5.png')} style={{width: 60, height: 60}}></Image>
          <Text>热映电影</Text>
        </View>
        <View style={styles.box}>
          <Image source={require('../../images/menu6.png')} style={{width: 60, height: 60}}></Image>
          <Text>联系我们</Text>
        </View>
      </View>
    </View>
  }
}